<template>
	<view class="content">
		<bg :bgArr="arr"></bg>
		<view v-if="!isWchat">
			<qr class="qr" ref="qrRef"></qr>
			<guide v-if="isWchat" class="guide"></guide>
			<view v-else class="down-btn">
				<!-- 下载按钮 -->
				<view @click="toDown" class="btn">立即下载</view>
				<view class="qcode" @click="cp"> 邀请码：{{userId}} </view>
			</view>
			<view class="bounce-text">{{project.serverName}}</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, getCurrentInstance, onMounted} from 'vue'
	import bg from '@/components/bg/bg.vue'
	import qr from '@/components/qr/qr.vue'
	import guide from '@/components/wxGuide/wxGuide.vue'
	import { inWeCaht, getSystem,downloadFile } from '@/utils/index.js'
	import { setClipboardData } from '@/utils/uniTools.js'
	import { addDevice,getDownUrl,getUserId } from '@/api/addDevice.js'
	import {project} from '@/config/config.js'
	import {getUrlParam} from '@/utils/url.js'
	const arr = ref(['/static/bg1.jpg', '/static/bg2.png', '/static/bg3.png'])
	const qrRef = ref(null)
	const isWchat = ref(false)

	const userId = ref(null)
	const text = ref('在珑音 一切都有可能')
	// 下载地址
	const url = ref("")
	onMounted(() => {
		let inWeChat = inWeCaht()
		if(inWeChat){
			isWchat.value = inWeCaht()	
			arr.value = ['/static/cm_none.jpg']
			return
		}
		
		// 获取动态路由参数
		const idcard = getUrlParam('idCard')
		if (idcard) {
			getUserId(idcard).then(res=>{
				console.log(res)
				userId.value = res+""
			})
		}
		else{
			// 没有参数
			arr.value = ['/static/cm_none.jpg']
		}
		
		// 获取最新下载地址
		_getDownUrl()
	})

	/**
	 * 点击下载切收集参数
	 */
	const toDown = () => {
		const system = getSystem()
		if (undefined === system) {
			// 浏览器 // 不是苹果也不是安卓 可能是浏览器

			return
		}
		_addDevice(system)
		const equipment = system.equipment
		if (equipment === 'Android') {
			// 下载地址为安卓
			downloadFile(url.value)
		} else if (equipment === 'iPhone') {
			// 下载地址为苹果
			alert("暂时不支持苹果")
		} else {
			console.log(equipment)
		}
	}

	const _addDevice = (system) => {
		// 复制到剪切板
		cp()
		let data = {}
		data.refereeId = userId.value.trim()
		data.phoneType = system.equipment.trim()
		data.systemVersion = system.systemMobile.trim()
		addDevice(data).then(res => {
			console.log(res)
		})
	}

	const cp = () => {
		setClipboardData(userId.value.trim(),"下载中...")
	}
	
	const _getDownUrl = ()=>{
		const system = getSystem()
		const equipment = system.equipment
		if (equipment === 'Android') {
			getDownUrl(0).then(res=>{
				url.value = res.downloadUrl
			})
			return
		}
		getDownUrl(1).then(res=>{
			url.value = res.downloadUrl
		})
		return
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		position: relative;

		.qr {
			position: absolute;
			bottom: 15%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.guide {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 99;
		}

		.bounce-text {
			position: absolute;
			z-index: 88;
			left: 50%;
			top: 50%;
			writing-mode: vertical-lr;
			letter-spacing: 10rpx; 
			transform: translate(-50%, -50%);
			color: #fff;
			font-size:166rpx;
			font-family: system-ui;
			font-weight: bold;
			animation:  scFont 2.3s;
			 overflow: hidden;
			 text-shadow: 
			     -3px 0 3px #0affff, /* 左边的阴影，带5像素的模糊半径 */
			     5px 0 3px #ff5feb; /* 右边的阴影，带5像素的模糊半径 */
		}

		.down-btn {
			position: absolute;
			z-index: 88;
			bottom: 10%;
			left: 50%;
			width: 80%;
			text-align: center;
			transform: translateX(-50%);
			opacity: 0;
			/* 初始时不可见 */
			animation: fadeIn 2.3s forwards;

			/* 动画名称、持续时间和结束状态 */
			.btn {
				color: #333;
				background-color: #fff;
				border-radius: 99px;
				padding: 20rpx 80rpx;
				font-size: 40rpx;
			}

			.qcode {
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 8rpx;
				color: #fff;
				padding: 20rpx 80rpx;
				font-size: 35rpx;
				margin: 10rpx 0;
				border-radius: 99px;
				border: 1px solid #fff;
			}
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		/* 开始时透明 */
		to {
			opacity: 1;
		}
	}

	@keyframes bounce {

		0%,
		100% {
			transform: scale(1);
			/* 初始和最终状态为正常大小 */
		}

		50% {
			transform: scale(1.3);
			/* 放大到1.5倍 */
		}
	}
	
	@keyframes scFont {
		0% {
			font-size: 1500rpx;
		}
		100%{
			font-size: 166rpx;
		}
	}
</style>